

            <section class="row">
                <div class="col-12">
                    <div>
                        <h1><i class="fa fa-list-alt"></i> Panel Settings</h1>
                    </div>
                    <div>
                        <ol class="breadcrumb">
                            <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                            <li>Containers</li>
                            <li class="active">Panel Settings</li>
                        </ol>
                    </div>
                </div>
            </section>
        
        <div class="ajax-container">
            <section class="row">
                <div class="col-lg-7">
                    <div class="panel panel-default tab-container">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-gear"></i> Panel Settings</h2>
                        </div>
                        <div class="panel-body tabs tabs-top no-padding">
                            <ul  class="nav nav-tabs">
                                <li class="active"><a href="#panel-settings" data-toggle="tab"><i class="fa fa-gear"></i> <span class="hidden-xs">Settings</span></a></li>
                                <li><a href="#code" data-toggle="tab"><i class="fa fa-code"></i> <span class="hidden-xs">Code</span></a></li>
                            </ul>
                            <div class="tab-content media-body">
                                <div id="panel-settings" class="tab-pane active form-container">
                                    
                                    <form class="form-vertical form-bordered form-column">

                                        <fieldset class="col-3">
                                            <legend>Header Settings</legend>
                                            <ul>
                                                <li class="form-group row">
                                                    <label for="header" class="control-label col-12">Header</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="header" id="header" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                
                                                <li class="form-group row header-setting">
                                                    <label for="icon" class="control-label col-12">Icon</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <input type="checkbox" name="icon" id="icon" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row header-setting">
                                                    <label for="bold" class="control-label col-12">Bold</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="bold" id="bold" class="switch form-control" data-on-text="yes" data-off-text="no">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row header-setting">
                                                    <label for="minimize" class="control-label col-12">Minimize</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="minimize" id="minimize" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row header-setting">
                                                    <label for="close" class="control-label col-12">Close</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="close" id="close" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </fieldset>
                                        
                                        <fieldset class="col-3">
                                            <legend>Body Settings</legend>
                                            <ul>
                                                <li class="form-group row">
                                                    <label for="padding" class="control-label col-12">Padding</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="padding" id="padding" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row">
                                                    <label for="guideline" class="control-label col-12">Guideline</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="guideline" id="guideline" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row guideline-setting">
                                                    <label for="sticky-guideline" class="control-label col-12">Sticky Guideline</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="sticky-guideline" id="sticky-guideline" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </fieldset>
                                        
                                        <fieldset class="col-3">
                                            <legend>General Settings</legend>
                                            <ul>
                                                <li class="form-group row">
                                                    <label for="size" class="control-label col-12">Size</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="size" id="size" class="form-control input-sm">
                                                                    <option value="panel-small">Small</option>
                                                                    <option value="panel-medium" selected>Medium</option>
                                                                    <option value="panel-large">Large</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row">
                                                    <label for="state" class="control-label col-12">State</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="state" id="state" class="form-control input-sm">
                                                                    <option value="panel-default" selected>Default</option>
                                                                    <option value="panel-primary">Primary</option>
                                                                    <option value="panel-success">Success</option>
                                                                    <option value="panel-info">Information</option>
                                                                    <option value="panel-warning">Warning</option>
                                                                    <option value="panel-danger">Danger</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </fieldset>
                                        
                                        <fieldset class="col-3">
                                            <legend>Footer Settings</legend>
                                            <ul>
                                                <li class="form-group row">
                                                    <label for="footer" class="control-label col-12">Footer</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="footer" id="footer" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </fieldset>
                                        
                                        
                                    </form>
                                    
                                </div>
                                <div id="code" class="tab-pane no-padding">
<pre id="pretty-code" class="prettyprint linenums">
    
&lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
        &lt;div class="pull-right"&gt;
            &lt;span class="caret" data-toggle="collapse" data-target="#collapse-me"&gt;&lt;/span&gt;
            &lt;button type="button" class="close" aria-hidden="true"&gt;×&lt;/button&gt;
        &lt;/div&gt;
        &lt;h2 class="panel-title bold"&gt;&lt;i class="fa fa-list-alt"&gt;&lt;/i&gt; Preview Panel&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;
        &lt;div class="guideline guideline-sticky bg-info"&gt;
            &lt;i class="fa fa-info-circle fa-lg"&gt;&lt;/i&gt; Panel Guideline Goes Here.
        &lt;/div&gt;
        Content Goes Here ...
    &lt;/div&gt;
    &lt;div class="panel-footer"&gt;
        &lt;div class="align-center"&gt;
            Footer
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="panel-container" class="col-5">
                    
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="pull-right">
            <span class="caret" data-toggle="collapse" data-target="#collapse-me"></span>
            <button type="button" class="close" aria-hidden="true">&times;</button>
        </div>
        <h2 class="panel-title bold"><i class="fa fa-list-alt"></i> Preview Panel</h2>
    </div>
    <div class="panel-body">
        <div class="guideline guideline-sticky bg-info">
            <i class="fa fa-info-circle fa-lg"></i> Panel Guideline Goes Here.
        </div>
        Content Goes Here ...
    </div>
    <div class="panel-footer">
        <div class="align-center">
            Footer
        </div>
    </div>
</div>
                    
                </div>
            </section>
            <!-- page-script -->
            <script type="text/javascript" src="<?= base_url() ?>js/scripts/panel-settings.js"></script>
        </div>